<template>
   <div id="app3" style='padding-top:20px;'> 
       <div class='loading' v-loading="loading" v-if='loading'></div>
       <div class='xinshizhen-model' v-if='model' @click='offModel'>
           <div class='model-content'>
               <h1 >请上传你的行驶证</h1>
               <div class='input-wrap'>
                   <div>
                       <p>上传行驶证</p>
                   </div>
                   <input v-if='offFile' type="file" @click.stop='empty' @change='file' ref='file'>
               </div>
           </div>
       </div>
       <div id="app3_middle" class="middle" style='background:white;'>
        <div style="text-align:center;width:100%;">
            <div><img src="../../../static/img/xiaotu.png" width="100"></div>
            <h2 >您的油卡火速办理中</h2>
            <div><small>我们将在10个工作日内完成制卡并为您激活</small></div>
            <div><small>请留意短信提醒</small></div>
        </div>
       <div class="btn">
           <button @click="next">我知道了</button>
       </div> 
       <br>
    </div>
    <div class='linqu' @click='linqu' v-if='shijiancuo&&!status'>
        <div></div>
    </div>
    <div style='padding:4%;margin-top:25px;' v-if='shijiancuo&&status'>
      <div class='discount' @click='linqu'>
        已领取
        <span class='fa fa-angle-right icon'></span>
      </div>
    </div>
   </div>
</template>
<script>
import {SHIJIAN,_layer,URL_ACTIVITY,URL_XINSHIZHEN,URL_CARD} from '@/comm.js';
export default {
  data(){
    return ({
        offFile:true,
        shijiancuo:true,
        status:true,
        loading:false,
        drivingLicense:true,
        model:false,
    });
  },
  beforeCreate: function() {
    $("title").text('油卡正在火速办理中');
  },
  created(){
    let This=this;
    let nowtime=SHIJIAN-Math.round(new Date() / 1000);
    if(nowtime>0){
        this.shijiancuo=true;
    }else{
        this.shijiancuo=false;
    }
    $.post(URL_ACTIVITY,function(data){
        console.log('活动东');
        console.log(data);
        if(data.retult){
            This.status=!data.data.state;
            This.drivingLicense=data.data.drivingLicense;
        }else{
            _layer('领取数据拉取失败');
        }
    });
  },
  methods:{
    next:function(){
      WeixinJSBridge.call('closeWindow');
    },
    linqu(){
        if(this.drivingLicense){
            this.$emit('change');
        }else{
            this.model=true;
        }
    },
    file(){
        this.offFile=false;
        $(this.$refs.file).on('change',this.file);
        console.log('文件')
        let This=this;
        let file=this.$refs.file.files[0];
        let form=new FormData();
        form.append('file',file);
        this.loading=true;
        $.ajax({
            url:URL_XINSHIZHEN,
            type:'post',
            data:form, 
            cache:false,
            processData:false,
            contentType:false,
            success:function(data2){
                This.loading=false;
                console.log('稀释在');
                console.log(data2)
                console.log(JSON.parse(data2))
                let data=JSON.parse(data2);
                if(data.words_result['号牌号码'].words){
                    This.$emit('change');
                }else{
                    _layer('请传正确的行驶证');
                }
            }
        });
        setTimeout(function(){
            This.offFile=true;
        },1000);
    },
    offModel(){
        this.model=false;
    },
    empty(){}
  }
}
</script>
<style scoped>
    #app3 .middle{
      margin: auto;
      width:90%;
      height: auto;
      background-color: white;
      border-radius: 10px;
    }
    #app3 .btn{width:80%;margin: auto;}
    #app3 .btn button{
       width:100%;
       height: 35px;
       border: 1px solid #d2d2d2;
       outline: none;
       margin-top: 35px;
       font-size: 14px;
       background-color: #fff;
       border-radius: 25px;
       color: black;
       box-shadow: 1px 1px 10px #d2d2d2;
     }
     #app3_middle h2,
     #app3_middle div{
       margin-top:10px;
     } 
     .linqu{
        margin-top: 15px;
        padding: 20px;
        background: white;
     }
     .linqu > div {
        width:100%;
        height:300px;
        margin: auto;
        background: url('../../../static/img/lingquliping.png') no-repeat;
        background-size:100% 100%;
     }
     .xinshizhen-model{
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        left:0;
        z-index:5;
        background: rgba(0,0,0,.5);
     }
     .model-content{
        width: 80%;
        padding-bottom:30px;
        margin:50px auto;
        background: white;
        box-shadow: 0 0 10px white;
     }
     .model-content > h1 {
        padding: 25px 10px;
        color: red;
     }
     .input-wrap{
        position: relative;
        width:100px;
        height:100px;
        margin:auto;
     }
     .input-wrap > input,.input-wrap > div{
        position: absolute;
        top:0;
        width:100%;
        height: 100%
     }
     .input-wrap > div{
        background: url('../../../static/img/xiangji.png') no-repeat center 30px;
        background-size: 20px 15px;  
        border:1px dashed #eee;
     }
     .input-wrap > div > p{
        padding-top:60px; 
        text-align: center;
        color:#999;

     }
     .input-wrap > input{
        opacity: 0;
        z-index: 6;
     }
     .loading{
          position: fixed;
          top:0;
          right: 0;
          left: 0;
          bottom:0;
          z-index:10;
      }
      .discount{
        height:45px;
        padding:0 1em;
        background:white;
        font-size: 17px;
        line-height: 45px;
        letter-spacing: 2px;
        border-radius: 5px;
      }
      .icon{
        display: inline-block;
        height: 45px;
        line-height: 45px;
        float: right;
        transition: 0.3s;
      }
</style>


